<template>
  <!-- 抖音商品属性组件 -->
  <div>

    <el-form :model="propertyForm" 
      ref="propertyForm" 
      label-position="right"
      label-suffix="："
      :label-width="formLabelWidth" 
      :rules="rules" 
    >
      <el-form-item label="商品品牌" prop="externalBrandId">
        <el-select class="width-300" v-model="propertyForm.externalBrandId">
          <el-option label="无" value=""></el-option>
          <el-option v-for="item in brandList" :key="item.thirdBrandId" :label="item.chineseName||item.englishName" :value="item.externalBrandId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="减库存类型" prop="reduceType">
        <el-select v-model="propertyForm.reduceType" placeholder="请选择店铺商品减库存类型" class="width-300">
          <el-option v-for="item in reduceTypeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
        <div class="font-red">注: 设置之后, 不会改变系统中减库存的处理方式</div>
      </el-form-item>

      <el-form-item label="运费模板" prop="templateId">
        <el-select v-model="propertyForm.templateId" placeholder="请选择店铺商品运费模板" class="width-300" clearable>
          <el-option v-for="item in freightTemplateList" 
            :key="item.id" 
            :label="item.template_name" 
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="发货模式" prop="douyinPresellType">
        <el-select v-model="propertyForm.douyinPresellType" placeholder="请选择店铺商品发货模式" @change="changePromiseDeliveryType" class="width-300" clearable>
          <el-option v-for="item in douyinPresellTypeList" :key="item.douyinPresellType" :label="item.name" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="承诺发货时间" prop="promiseDeliveryType">
        <el-select v-model="propertyForm.promiseDeliveryType" placeholder="请选择店铺商品承诺发货时间" class="width-300" clearable :disabled="douyinPresellTypeDisable">
          <el-option v-for="item in douYinPromiseDeliveryTypeList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="7天无理由" prop="douyinSupplySevenDayReturn">
        <el-select v-model="propertyForm.douyinSupplySevenDayReturn" placeholder="请选择店铺商品7天无理由" class="width-300" clearable>
          <el-option v-for="item in douyinSupplySevenDayReturnList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-checkbox v-model="auditCommitFlag" true-label="2" false-label="1">
          <span>加入店铺时，同时提审（不勾选加入店铺时仅保存）</span>
        </el-checkbox>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
  import { listThirdBrand } from '@/api/goods/third-brand'
  import { getFreightTemplate } from '@/api/third/thirdGoods'

  export default {
    props: {
      formLabelWidth: {
        type: String
      },
      // 商品属性对象
      propertyObj: {
        type: Object
      }
    },
    data() {
      return {
        // 商品属性对象
        propertyForm: {
          reduceType: '',
          externalBrandId: '',
          templateId: '',
          douyinPresellType: '',
          promiseDeliveryType: '',
          douyinSupplySevenDayReturn: '',
          douyinAuditCommit: ''
        },
        // 提审flag
        auditCommitFlag: false,
        // 表单规则
        rules: {
          templateId: [
            { required: true, message: '请选择商品模板', trigger: 'blur' }
          ],
          promiseDeliveryType: [
            { required: true, message: '请选择承诺发货时间', trigger: 'blur' }
          ],
          douyinPresellType: [
            { required: true, message: '请选择发货模式', trigger: 'blur' }
          ],
          douyinSupplySevenDayReturn: [
            { required: true, message: '请选择7天无理由', trigger: 'blur' }
          ]
        },
        douyinSupplySevenDayReturnList: [
          { 'id': 0, 'name': '不支持' },
          { 'id': 1, 'name': '支持' },
          { 'id': 2, 'name': '支持（拆封后不支持）' }
        ],
        douyinPresellTypeList: [
          { value: 0, 'name': '现货发货' },
          { value: 1, 'name': '预售发货' },
          { value: 2, 'name': '阶梯发货' }
        ],
        douYinPromiseDeliveryTypeList: [
          { id: 2, name: '2天' },
          { id: 3, name: '3天' },
          { id: 5, name: '5天' },
          { id: 7, name: '7天' },
          { id: 10, name: '10天' },
          { id: 15, name: '15天' }
        ],
        reduceTypeList: [
          { id: 1, name: '拍下减库存' },
          { id: 2, name: '付款减库存' }
        ],
        brandList: [],
        // 运费模板列表
        freightTemplateList: [],
        douyinPresellTypeDisable: true
      }
    },
    created() {
      this.initByShopId()
    },
    mounted() {
    },
    methods: {
      // 根据店铺初始化
      initByShopId() {
        // 获取运费模板
        getFreightTemplate(this.propertyObj.platformType, this.propertyObj.shopId).then(response => {
          if (response.isError) return
          this.freightTemplateList = response.data
        })
        // 获取抖音品牌
        listThirdBrand({
          enterpriseId: this.getEnterpriseId(),
          memberId: this.getMemberId(),
          shopId: this.propertyObj.shopId,
          platformType: this.propertyObj.platformType
        }).then(response => {
          if (response.isError) return
          this.brandList = response.data
        })
      },
      // 发货模式切换事件
      changePromiseDeliveryType() {
        this.douYinPromiseDeliveryTypeList = []
        if (this.propertyForm.douyinPresellType.toString() === '1') {
          this.douYinPromiseDeliveryTypeList.push(
            { id: 2, name: '2天' },
            { id: 3, name: '3天' },
            { id: 5, name: '5天' },
            { id: 7, name: '7天' },
            { id: 10, name: '10天' },
            { id: 15, name: '15天' }
          )
        } else {
          this.douYinPromiseDeliveryTypeList.push({ id: 2, name: '2天' })
        }
        this.propertyForm.promiseDeliveryType = ''
        this.douyinPresellTypeDisable = this.propertyForm.douyinPresellType.toString() === ''
      },
      // 表单校验 true：成功 false：失败
      checkForm() {
        let ret = true
        this.$refs['propertyForm'].validate((valid, result) => {
          if (!valid) {
            // const propKeys = Object.keys(result)
            // this.$refs['propertyForm'].fields.forEach(field => {
            //   const index = propKeys.indexOf(field.prop)
            //   if (index !== -1) {
            //     this.$emit('addVaildShow', field)
            //   }
            // })
            ret = false
          }
        })
        return ret
      },
      // 提交表单
      submitForm() {
        return this.propertyForm
      }
    }
  }
</script>

<style scoped>

</style>